<template>
  <Header />

  <a-layout-content class="container-xxl px-0">
    <div class="cover px-3">
      <a-layout-content class="px-lg-5 mx-lg-5 d-flex align-items-center justify-content-center justify-content-lg-start">
        <div class="d-flex flex-column align-items-center align-items-lg-start py-5 my-5">
          <h1 class="fs-1 mb-1 fw-bolder mt-lg-5 pt-lg-5">开启数字大航海时代</h1>
          <span class="fs-6 col-10 text-center text-lg-start mb-lg-5 pb-lg-5">从这一日起，你将成为一名真正的船长，数字世界的航海旅程，区块灯塔为你导航</span>
          <span class="py-lg-5 my-lg-5"></span>
        </div>
      </a-layout-content>
    </div>
  </a-layout-content>
  <a-layout-content class="downloadApp container-xxl px-0 d-flex justify-content-center flex-column flex-lg-row align-items-center">
    <div class="downloadApp_cover col-10 col-lg-5 mx-lg-5 mb-4 mb-lg-0"></div>
    <div class="d-flex flex-column col-10 col-lg-5 mx-lg-5 align-items-center  align-items-lg-start pb-5">
      <h2 class="fs-1 mb-3 mb-lg-4">区块灯塔</h2>
      <span class="fs-6 mb-3 mb-lg-4 pe-0 pe-lg-5">提供区块链个大币种的行情走势、盘口、逐笔交易等实时行情数据,及新闻资讯、公司公告、研究报告、行业研报、资料、行业资讯、资金流等重要信息</span>
      <div>
        <a-button type="primary" size="large" class="mt-2 fs-5">
          <a href="###" target="_blank">立即下载</a>
        </a-button>
      </div>
    </div>
  </a-layout-content>
  <a-layout-content class="container-xxl px-0">
    <div class="about">
      <div class="d-flex p-0 p-md-5 m-0 m-md-5 flex-column align-items-center text-center">
        <h2 class="fs-1 mb-2">数字无界</h2>
        <div class="fs-6 px-0 mx-xl-5 px-xl-5 d-flex">
          <span class="mx-xl-5 px-xl-5">数字无界是一个有关数字资产数据和情报提供商。为用户提供顶级数字资产的链上数据、市场数据、交易指标、信号及综合资讯服务。</span>
        </div>
      </div>
    </div>
  </a-layout-content>

  <Footer />
</template>

<script>
import Header from '@/components/layout/Header'
import Footer from '@/components/layout/Footer'

export default {
  components: {
    Header,
    Footer,
  },
  computed: {
  },
};
</script>
<style scoped lang="less">
.cover {
  background: url('../assets/base/art/main_bg1.jpg') no-repeat center bottom;
  background-size: cover;
  h1 {
    font-size: 48px;
  }
}
.about {
  background: url('../assets/base/art/main_bg3.jpg') no-repeat center center;
  padding: 62px 54px 70px;
  background-size: cover;
}
.downloadApp {
  padding-top: 36px;
  max-width: 1150px;
  .downloadApp_cover {
    background: url('../assets/img03.png') no-repeat center bottom;
    background-size: contain;
    min-height: 360px;
  }
}
@media (min-width: 1150px) {
  .cover {
    h1 {
      font-size: 72px !important;
      line-height: 98px;
    }
  }
  .downloadApp {
    padding-top: 117px;
    .downloadApp_cover {
      width: 522px;
      height: 511px;
    }
  }
}
</style>
